<template>
	<view class="ul-list">
		<view class="list-item" v-for="dt in lists || []" :key="dt.id">
			<view class="con" @click="goDetails(dt)">
				<view class="imgbox">
					<image class="img" :src="dt.imageUrl" mode="aspectFill"></image>
				</view>
				<view class="desc">
					<view class="bleft">
						<text class="title">{{dt.name}}</text>
						<view class="hyj">会员价 <text class="price">¥{{dt.price}}</text> </view>
					</view>
					<view class="bright" @click.stop="addGoods(dt)">
						<image class="btnimg" :src="imgUrlPrefix+'static/images/add.png'" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {getServiceList} from "@/api/index.js"
	export default defineComponent({
		components:{
			
		},
		props:{
			lists:''
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				orderInfo:computed(()=>store.state.base.orderInfo), 
				goods:computed(()=>store.state.base.goods), // 选择的商品
			})
			
			onMounted(()=>{
				
			})
			
			const goDetails = (item)=>{
				store.commit('base/clear_goods') // 清空
				store.commit('base/add_goods',item)
				uni.navigateTo({
					url:`/pages/details/details?id=${item.id}&orderType=2`
				})
			}
			
			const addGoods = (item)=>{
				state.orderInfo.orderType = 2  // 2表示服务类订单
				store.commit('base/add_goods',item)
				console.log("goods:",state.goods)
				console.log("orderInfo:",state.orderInfo)
			}
			
			return {
				...toRefs(state),
				goDetails,
				addGoods
			}
		}
	})
</script>

<style lang="scss" scoped>
	.ul-list{
		box-sizing: border-box;
		width: 100%;
		padding: 0 15rpx;
		.list-item{
			box-sizing: border-box;
			float: left;
			width: 50%;
			padding: 0 10rpx 20rpx 10rpx;
			.con{
				background-color: #fff;
				box-shadow: 0 0 10rpx #e8e3d8;
				padding: 20rpx;
				border-radius: 12rpx;
				.imgbox{
					width: 100%;
					height: 200rpx;
					overflow: hidden;
					.img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.desc{
					display: flex;
					.bleft{
						flex: 1;
						width: 0;
						.title{
							display: block;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 26rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
						}
						.hyj{
							font-size: 24rpx;
							.price{
								font-size: 32rpx;
								color: #ff0000;
							}
						}
					}
				}
			}
			
		}
		&::after{
			content: '';
			display: block;
			clear: both;
		}
		.bright{
			display: flex;
			width: 50rpx;
			align-items: center;
			margin: 10rpx 0 0 0;
			.btnimg{
				display: block;
				width: 100%;
				height: auto;
				&:hover{
					opacity: 0.5;
				}
			}
		}
	}
</style>
